<template>
  <div class="tool-coding-url">
    <a-row>
      <a-col span="2">URL</a-col>
      <a-col span="22">
        <a-button class="btn" type="primary" size="small" @click="btnClick(true)">编 码</a-button>
        <a-button class="btn" type="primary" size="small" @click="btnClick(false)">解 码</a-button>
      </a-col>
    </a-row>

    <!--提示框-->
    <w-modal
      ref="WModal"
      :title="`URL${coding ? '编码' : '解码'}`"
      :ok-text="form.data ? '清除' : '确定'"
      :ok-type="form.data ? 'danger' : 'primary'"
      @ok="okBtnClick"
    >
      <a-input v-model="form.inputValue" type="textarea" placeholder="请输入..." />
      <w-copy-text v-if="form.data" :top="20" :text="form.data" class="w-text-warp">{{ form.data }}</w-copy-text>
    </w-modal>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import WModal, { ModalComType } from "@/components/global/modal";

@Component({
  name: "WebToolUrl",
  components: {
    WModal,
  },
})
export default class Com extends Vue {
  /**
   * 编码还是解码
   */
  coding = true;
  form = {
    inputValue: "",
    data: "",
  };

  btnClick(coding: boolean) {
    this.form = {
      inputValue: "",
      data: "",
    };
    (this.$refs.WModal as ModalComType).show();
    this.coding = coding;
  }

  okBtnClick() {
    if (this.form.data) {
      this.form = {
        inputValue: "",
        data: "",
      };
      return;
    }
    const func = this.coding ? encodeURIComponent : decodeURIComponent;
    this.form.data = func(this.form.inputValue);
  }
}
</script>

<style lang="less"></style>
